//管理系统用户
import './css/all.css';
import { useState } from 'react';

const AllUser = () => {
    const [isAlt1, setIsAlt1] = useState(false);
    const [obj, setObj] = useState([])
    const [content, setContent] = useState('');
    const alter1 = () => {
        setIsAlt1(true);
        fetch('https:www.h5fd.xyz:2021/test/allUser')
            .then(res => res.json())
            .then(res => {
                setObj(res);
            })
    }
    const delUser = (userid) => {
        fetch(`https:www.h5fd.xyz:2021/test/deluser/${userid}`)
            .then(res => {
                if (res.status == 200) {
                    fetch('https:www.h5fd.xyz:2021/test/allUser')
                        .then(res => res.json())
                        .then(res => {
                            console.log(res);
                            setObj(res);
                        })
                }
                console.log(res)
            })
    }
    const saveUser = () => {
        try {
            var obj = {
                notice_content: content
            }
            fetch('https:www.h5fd.xyz:2021/test/notice', {
                method: 'POST',
                body: JSON.stringify(obj)
            }).then(res => res.text())
                .then(res => {
                    if(res=='success'){
                        alert('提交成功');
                        setContent('');
                    }
                })
        } catch (err) {
            console.log(err);
            return 'tcx'
        }
    }
    const newAdmin = ()=>{
        var newName = document.getElementById('newName').value;
        var newPass = document.getElementById('newPass').value;
        var obj = {
            newName:newName,
            newPass:newPass
        }
        fetch('https:www.h5fd.xyz:2021/test/newAdmin',{
            method:'POST',
            body:JSON.stringify(obj),
        }).then(res=>res.text())
        .then(res=>{
            console.log(res);
            alert("创建成功");
            document.getElementById('newName').value="";
            document.getElementById('newPass').value="";
        })
    }
    return (
        <div className="users">
            <div className='btns'>
                <button className="allUserBtn" onClick={alter1}>展示所有小程序用户信息</button>
                <button className="" style={{"display":isAlt1?'inline-block':'none'}} onClick={()=>setIsAlt1(!isAlt1)}>收起</button>
            </div>
            {isAlt1 ?
                <ul className="allUser">
                    {
                        obj.map((obj) => {
                            return <li>
                                    <p className="pUser">
                                        <img src={obj.user_headshot} width="50px" height="50px" /><span>user_id:{obj.user_id}</span> <span>name:{obj.user_nickname}</span>
                                    </p>
                                    <button className="delUser" onClick={() => delUser(obj.user_id)}>删除</button>
                                </li>
                        })
                    }
                </ul> : <></>}
            <div className='submit'>
                向用户提交信息：
                <input className="noticeput" value={content} onChange={(e) => setContent(e.target.value)}></input>
                <button onClick={saveUser} className="btn1">提交</button>
            </div>
            <div>增加新的管理员
                <input placeholder="管理员名称" id="newName"/>
                <input placeholder="管理员密码" id="newPass"/>
                <button onClick={newAdmin}>新建</button>
            </div>
        </div>
    )
}

export default AllUser;